<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">采购管理</a></d-breadcrumb-item>
      <d-breadcrumb-item>报销审批</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <d-splitter orientation="vertical" disabledBarSize="1px" [splitBarSize]="splitBarSize" style="height: 100%"
      [showCollapseButton]="true">
      <d-splitter-pane minSize="50%" [size]="partDetailHeight">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="d-input">
              <div class="inputIn">
                <input dTextInput style="width: 180px;" [error]="false" placeholder="报销单号" name="报销单号" [(ngModel)]="fifter.RequestNum">
                <d-range-datepicker-pro name="申请日期" [placeholder]="['申请日期：起始','申请日期：截止']" [(ngModel)]="creatTime" (ngModelChange)="creatTimeChange($event)"></d-range-datepicker-pro>
                <d-select [placeholder]="'选择供应商'" name='选择供应商' [options]="Supplier" [(ngModel)]="fifter.Supply"
                [valueKey]="'chineseName'" [filterKey]="'chineseName'" [allowClear]="true"></d-select>
                <input dTextInput style="width: 180px;" [error]="false" placeholder="申请人" [(ngModel)]="fifter.RequestBy">
                <d-select [placeholder]="'审批状态'" name='审批状态' [options]="status" [(ngModel)]="fifter.Status" [allowClear]="true"></d-select>
              </div>
              <div class="d-submit">
                <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter2()">
                  <i class="icon icon-filter-o me-2"></i>查询
                </d-button>
                <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
              </div>
            </div>
            <div class="btn-group">
              <div class="btn-left">
                <d-button bsStyle="primary" (btnClick)="creat()">
                  <i class="icon icon-add me-2"></i>新增报销申请
                </d-button>
                <d-button bsStyle="common" (btnClick)="batchApproval()">
                  <i class="icon icon-check me-2"></i>批量审批
                </d-button>
                <d-button bsStyle="danger" (btnClick)="reject()">
                  <i class="icon icon-close me-2"></i>批量拒绝
                </d-button>
                <d-button bsStyle="common" (btnClick)="download()"> <i class="icon icon-related me-2"></i>导出</d-button>
                <d-button bsStyle="common" (btnClick)="printSelected()">
                  <i class="icon icon-print me-2"></i>打印
                </d-button>
                <d-button bsStyle="common" (btnClick)="allLog()">日志</d-button>
              </div>
            </div>
          </div>
          <div class="list-content">
            <!-- <d-table-option-toggle
            style="margin-left: 12px"
            [toggleMode]="'modal'"
            [styleSetting]="styleSetting"
            [columnsData]="allColumns"
            [modalWidth]="'800px'"
            (colChanges)="onColsChanges($event)"
            (styleChanges)="onStyleChanges($event)"
          >
            <d-button bsStyle="primary" [bordered]="true" [autofocus]="true">弹窗配置</d-button>
          </d-table-option-toggle> -->
            <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
              [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
              (checkAllChange)="getCheckedRows();getCheckedRowsData() "
              (rowCheckChange)="getCheckedRows();getCheckedRowsData()" [resizeable]="true" [size]="styleSetting.size"
              [borderType]="styleSetting.borderType" [striped]="styleSetting.striped"
              [shadowType]="styleSetting.shadowType">
              <thead dTableHead [checkable]="true">
                <tr dTableRow>
                  <th dHeadCell [fixedLeft]="colOption.fixedLeft" [fixedRight]="colOption.fixedRight"
                    *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                  <tr dTableRow (click)="showDetail(rowItem, rowIndex)"
                    [ngClass]="{'selected-row': rowIndex === selectedRowIndex}">
                    <td dTableCell [fixedLeft]="'0px'">
                      <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                        [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked"
                        [showGlowStyle]="false"
                        (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)">
                      </d-checkbox>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [fixedLeft]="'80px'">
                      <span><a [class.disabled]="rowItem.status == '已完成' || rowItem.status == '已拒绝'" (click)="approveReimbursement(rowItem.reimbursementNum)" class="devui-link ms-3">审批通过</a></span>
                      <span><a [class.disabled]="rowItem.status == '已完成' || rowItem.status == '已拒绝'" (click)="rejectReimbursement(rowItem.reimbursementNum)" class="devui-link-danger ms-3">拒绝</a></span>
                      <span><a class="devui-link ms-3" (click)="viewReimbursement(rowItem.reimbursementId)">查看详情</a></span>
                      <span><a [class.disabled]="rowItem.status !== '已完成'" class="devui-link ms-3" (click)="closed(rowItem.reimbursementId)">结案</a></span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'" [fixedLeft]="'330px'">
                      <span dTooltip [content]="rowItem.reimbursementNum">{{ rowItem.reimbursementNum }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.requestDate | date:'yyyy-MM-dd'">{{ rowItem.requestDate | date:'yyyy-MM-dd' }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.supplierName">{{ rowItem.supplierName }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.supplierFullName">{{ rowItem.supplierFullName }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.supplierContact">{{ rowItem.supplierContact }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.requestBy">{{ rowItem.requestBy }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.department">{{ rowItem.department }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span><d-tag [tag]="rowItem?.isClosed | booleanToText:'已结案':'未结案'"></d-tag></span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.remark">{{ rowItem.remark }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span *ngIf="rowItem.attachment" (click)="fujian(rowItem)"><a class="devui-link">查看附件</a></span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.totalAmount">{{ rowItem.totalAmount }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.taxAmount">{{ rowItem.taxAmount }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.totalAmountWithoutTax">{{ rowItem.totalAmountWithoutTax }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.approvalStatus">{{ rowItem.approvalStatus }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.approvalBy">{{ rowItem.approvalBy }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.approvalDate">{{ rowItem.approvalDate | date:'yyyy-MM-dd' }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span *ngIf="rowItem.qrCode">
                        <img [src]="rowItem.qrCode" alt="二维码" height="22px" />
                      </span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.creator">{{ rowItem.creator }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.createDate">{{ rowItem.createDate }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span (click)="GetLogsById(rowItem.reimbursementId)"><a class="devui-link">日志</a></span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'" [fixedRight]="'0px'">
                      <span><d-tag [tag]="rowItem?.status" [labelStyle]="rowItem?.status"></d-tag></span>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
          <div class="page-footer">
            <div>
              <p>已选 <span class="underline">{{checkedIds.length}}</span> 条
                <a (click)="cleared()" class="cleared">清空</a>
              </p>
            </div>
            <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true"
              [maxItems]="5" [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions"
              [(pageSize)]="fifter.PageSize" [(pageIndex)]="fifter.PageNumber"
              (pageIndexChange)="pageIndexChange($event)" (pageSizeChange)="pageSizeChange($event)">
            </d-pagination>
          </div>
        </div>
      </d-splitter-pane>
      <d-splitter-pane class="detailTable" style="overflow: hidden;" [collapsible]="true">
        <div class="da-list-container">
          <div class="list-content">
            <h4 style="padding: 10px; margin: 0; background-color: #f5f5f5; border-bottom: 1px solid #ddd;">报销详情信息</h4>
            <d-data-table [dataSource]="reimbursementDetail" [lazy]="true" [scrollable]="true" [fixHeader]="true"
              [scrollable]="true" [resizeable]="true" [tableWidthConfig]="tableWidthConfig2"
              [tableOverflowType]="'auto'">
              <thead dTableHead>
                <tr dTableRow>
                  <th dHeadCell>
                    <span>操作</span>
                  </th>
                  <th dHeadCell>
                    <span>物料编码</span>
                  </th>
                  <th dHeadCell>
                    <span>物料名称</span>
                  </th>
                  <th dHeadCell>
                    <span>规格型号</span>
                  </th>
                  <th dHeadCell>
                    <span>物料描述</span>
                  </th>
                  <th dHeadCell>
                    <span>物料单位</span>
                  </th>
                  <th dHeadCell>
                    <span>采购数量</span>
                  </th>
                  <th dHeadCell>
                    <span>单价</span>
                  </th>
                  <th dHeadCell>
                    <span>总金额</span>
                  </th>
                  <th dHeadCell>
                    <span>采购日期</span>
                  </th>
                  <th dHeadCell>
                    <span>发票号</span>
                  </th>
                  <th dHeadCell>
                    <span>存储位置</span>
                  </th>
                  <th dHeadCell>
                    <span>备注</span>
                  </th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                  <tr dTableRow>
                    <td dTableCell>
                      <span><a class="devui-link" (click)="viewDetailItem(rowItem)">查看</a></span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.ingredientCode">{{rowItem.ingredientCode}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.ingredientName">{{rowItem.ingredientName}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.specification">{{rowItem.specification}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.description">{{rowItem.description}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.unit">{{rowItem.unit}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.quantity">{{rowItem.quantity}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.unitPrice">{{rowItem.unitPrice}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.totalAmount">{{rowItem.totalAmount}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.purchaseDate | date:'yyyy-MM-dd'">{{rowItem.purchaseDate | date:'yyyy-MM-dd'}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.invoiceNum">{{rowItem.invoiceNum}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.storageLocation">{{rowItem.storageLocation}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.remark">{{rowItem.remark}}</span>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
        </div>
      </d-splitter-pane>
    </d-splitter>

  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
